<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>交融动画效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30vh;
        background: #c0d695;
      }

      .bubbles {
        width: 100%;
        height: 1rem;
        position: absolute;
        top: 0;
        left: 0;
        filter: url(#goo);
        background: inherit;
      }

      .bubble {
        width: var(--size, 10px);
        height: var(--size, 10px);
        position: absolute;
        left: var(--x, 0);
        background: #c0d695;
        border-radius: 50%;
        animation: rise var(--duration, 2s) linear forwards;
      }

      @keyframes rise {
        0% {
          transform: translateY(0) scale(1);
        }

        75% {
          transform: translateY(-22.5vh) scale(0.5);
        }

        100% {
          transform: translateY(-30vh) scale(0);
        }
      }
    </style>
  </head>

  <body>
    <footer>
      <div class="bubbles"></div>
      <svg style="display: none">
        <defs>
          <!-- 定义滤镜 -->
          <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
            <feColorMatrix
              in="blur"
              mode="matrix"
              values="
                        1 0 0 0 0
                        0 1 0 0 0
                        0 0 1 0 0
                        0 0 0 20 -10"
              result="goo"
            />
            <feBlend in="SourceGraphic" in2="goo" />
          </filter>
        </defs>
      </svg>
    </footer>
    <script>
      const bubblesContainer = document.querySelector('.bubbles')

      const createBubble = () => {
        const bubble = document.createElement('div')
        bubble.classList.add('bubble')
        const size = Math.floor(Math.random() * 150) + 50
        const { width } = bubblesContainer.getBoundingClientRect()
        bubble.style.setProperty('--size', `${size}px`)
        bubble.style.setProperty('--x', `${Math.round(Math.random() * (width - size))}px`)
        bubble.style.setProperty('--duration', `${Math.floor(Math.random() * 3000) + 2000}ms`)
        bubblesContainer.appendChild(bubble)
        bubble.addEventListener('animationend', () => {
          bubblesContainer.removeChild(bubble)
          // 继续生成新的泡泡，保持数量
          createBubble()
        })
      }

      // 初始生成一些泡泡
      for (let i = 0; i < 20; i++) {
        createBubble()
      }
    </script>
  </body>
</html>
